import type { Dispatch, StateUpdater } from 'preact/hooks';
import * as s from './files.module.css';
import type { JSX } from 'preact/jsx-runtime';

export interface FilesProps {
  filenames: string[];
  currentFile: string | undefined;
  setCurrentFile: Dispatch<StateUpdater<string>>;
}

export default function Files({
  filenames,
  currentFile,
  setCurrentFile,
}: FilesProps) {
  return (
    <ul class={s.fileList}>
      {filenames.map((filename) => (
        <li key={filename}>
          <button
            type="button"
            class={s.filename}
            aria-pressed={currentFile === filename}
            onClick={() => setCurrentFile(filename)}
          >
            <TokensIcon class={s.fileIcon} />
            {filename}
          </button>
        </li>
      ))}
    </ul>
  );
}

export function TokensIcon(props: JSX.IntrinsicElements['svg']) {
  return (
    <svg
      {...props}
      viewBox="0 0 32 32"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden
    >
      <path
        d="M15.0077 0.56726C15.6226 0.215908 16.3774 0.215908 16.9923 0.56726L28.9923 7.4244C29.6154 7.78049 30 8.44318 30 9.16089V22.8396C30 23.5573 29.6154 24.22 28.9923 24.5761L16.9923 31.4332C16.3774 31.7846 15.6226 31.7846 15.0077 31.4332L3.00772 24.5761C2.38457 24.22 2 23.5573 2 22.8396V9.16089C2 8.44318 2.38457 7.78049 3.00772 7.4244L15.0077 0.56726Z"
        fill="#666"
      />
      <path
        d="M16.875 31.4953C16.8383 31.5131 16.8001 31.5287 16.7627 31.5441C16.8028 31.5276 16.8436 31.5106 16.8828 31.4914L16.875 31.4953ZM16.1279 1.31265C16.2556 1.32911 16.3808 1.37077 16.4961 1.43668L28.4854 8.28629H28.4873L28.4971 8.29214C28.6507 8.38007 28.7748 8.50586 28.8613 8.65347C28.9506 8.80506 29 8.98049 29 9.16226V22.84C28.9999 22.9411 28.9821 23.0399 28.9531 23.1339C28.9525 23.1365 28.9529 23.1402 28.9521 23.1427C28.9482 23.1549 28.9418 23.1668 28.9375 23.1789C28.9265 23.2092 28.9152 23.2397 28.9014 23.2687C28.8928 23.2868 28.8836 23.3049 28.874 23.3224C28.8641 23.3403 28.8528 23.3579 28.8418 23.3752C28.8341 23.3874 28.8266 23.4004 28.8184 23.4123C28.8071 23.4284 28.7954 23.4447 28.7832 23.4601C28.7602 23.4893 28.7352 23.5175 28.709 23.5441C28.7058 23.5473 28.7024 23.5507 28.6992 23.5539C28.6729 23.5798 28.6445 23.6041 28.6152 23.6271C28.6101 23.6312 28.6049 23.6358 28.5996 23.6398C28.5669 23.6644 28.5322 23.6885 28.4961 23.7091L16.4961 30.5656C16.4767 30.5767 16.4555 30.5842 16.4355 30.5939C16.4031 30.6096 16.3705 30.6239 16.3369 30.6359C16.2768 30.6574 16.2157 30.6741 16.1533 30.6837C16.1025 30.6916 16.0513 30.6955 16 30.6955C15.8288 30.6955 15.6575 30.6532 15.5039 30.5656L3.50391 23.7091L3.4248 23.6584C3.41845 23.6539 3.41247 23.6483 3.40625 23.6437C3.39642 23.6364 3.38647 23.6288 3.37695 23.6212C3.35171 23.6011 3.32769 23.5792 3.30469 23.5568C3.29998 23.5522 3.29467 23.5478 3.29004 23.5431C3.2625 23.5152 3.23589 23.486 3.21191 23.4552C3.20639 23.4481 3.20159 23.44 3.19629 23.4328C3.17895 23.4092 3.16266 23.3845 3.14746 23.3595C3.14161 23.3499 3.13542 23.34 3.12988 23.3302C3.11134 23.2972 3.09287 23.2636 3.07812 23.2287C3.07522 23.2218 3.07303 23.2141 3.07031 23.2072C3.06194 23.186 3.05381 23.1636 3.04688 23.1418C3.04551 23.1374 3.04506 23.1324 3.04395 23.1281C3.01614 23.0359 3.00011 22.9389 3 22.84V9.16226L3.00879 9.02847C3.04817 8.73545 3.21738 8.4732 3.4707 8.31461C3.48218 8.30741 3.49306 8.2989 3.50488 8.29214L3.5127 8.28726L15.5039 1.43668C15.6575 1.34891 15.8289 1.30487 16 1.30484C16.0427 1.30483 16.0855 1.30722 16.1279 1.31265ZM4 22.2804L8.38379 19.7755C8.61918 19.6414 8.91872 19.7349 9.05371 19.9699C9.18833 20.2051 9.11606 20.509 8.88086 20.6437L4.51758 23.1369L15.5 29.4113V16.2902L4 9.71793V22.2804ZM16.5 16.2902V29.4113L27.4805 23.1369L23.1182 20.6437C22.8827 20.5091 22.8108 20.2053 22.9453 19.9699C23.08 19.7347 23.3789 19.6411 23.6143 19.7755L28 22.2814V9.71793L16.5 16.2902ZM9.15918 14.5089C9.22686 14.1969 9.58019 14.0585 9.85742 14.2169L14.248 16.7257C14.4038 16.8148 14.5 16.9809 14.5 17.1603V22.215C14.4999 22.5339 14.2047 22.7713 13.9004 22.6759C11.0608 21.7841 9.00012 19.1341 9 16.0002C9 15.4885 9.05511 14.9894 9.15918 14.5089ZM22.1416 14.2169C22.4189 14.0585 22.773 14.1969 22.8408 14.5089C22.9452 14.9894 23 15.4885 23 16.0002C22.9999 19.1341 20.9392 21.7841 18.0996 22.6759C17.7953 22.7713 17.5001 22.5339 17.5 22.215V17.1603C17.5 16.9809 17.5962 16.8148 17.752 16.7257L22.1416 14.2169ZM16.499 7.51675C16.4988 7.78717 16.2705 8.00106 16 8.00113C15.7286 8.00089 15.4993 7.78715 15.499 7.51578V2.59097L4.51953 8.86246L16 15.423L27.4775 8.86246L16.499 2.58902V7.51675ZM16 9.00015C17.8354 9.00015 19.5055 9.70665 20.7539 10.8625C20.9883 11.0795 20.9287 11.455 20.6514 11.6134L16.248 14.13C16.0944 14.2177 15.9056 14.2177 15.752 14.13L11.3477 11.6134C11.0703 11.455 11.0108 11.0795 11.2451 10.8625C12.4936 9.70647 14.1643 9.00015 16 9.00015ZM15.125 0.506989C15.0857 0.526126 15.0461 0.546653 15.0078 0.568512L3.00781 7.42496L15.0078 0.567535C15.0844 0.523786 15.1637 0.485147 15.2441 0.452301C15.204 0.468692 15.1642 0.487885 15.125 0.506989Z"
        fill="#000"
      />
    </svg>
  );
}
